<template>
    <header>
        <nav>
            <ul>
                <li v-for="navList in navLists"><router-link :to="navList.to" exact>{{navList.name}}</router-link></li>
            </ul>
        </nav>
    </header>
</template>

<script>
    export default {
        nama: "Header",
        data() {
            return {
                navLists: [
                    {to: {name: "Home"}, name: "博客"},
                    {to: {name: "PublishBlog"}, name: "发布博客"}
                ]
            }
        },
    }
</script>

<style scoped>
    ul {text-align: center;list-style-type: none;margin: 0;}
    li {display: inline-block;margin: 0 10px;}
    a {color: #fff;text-decoration: none;padding: 12px;border-radius: 5px;}
    nav {background-color: crimson;padding: 30px 0;margin-bottom: 40px;}
    .router-link-active {background-color: rgba(255,255,255,0.8);color: #444;}
</style>